<template>
	<view class="flex-column-between container">
		<div class="content-pannel flex-column">
			<div class="name">实验室</div>
			<div class="exp-list">
			<div v-for="item in experimentList" class="exp-card flex-between">
				<div class="left flex-column">
					<div class="l-1 flex-box">
						<div class="status" :class="statusClass(item.siteStatus&&item.siteStatus.code)">{{item.siteStatus&&item.siteStatus.msg}}</div>
						<span @click="cardClick(item)">{{item.experimentName}}</span>
					</div>
					<div class="l-2">
						实验场地：{{item.siteName}}
					</div>
					<div class="l-3 flex-box" @click="monitorClick(item)">
						<image class="icon" src="../../static/imgs/monitor.png" alt="">
						<span>查看监控</span>
					</div>
				</div>
				<image class="toggle" :src="item.toggle?require('../../static/imgs/toggle_on.png'):require('../../static/imgs/toggle_off.png')" alt="">
			</div>	
			</div>

		</div>
				
		<tab-bar></tab-bar>
	</view>
</template>

<script>
	import{request} from '@/utils/http.js'
	import tabBar from '../../components/tabbar.vue'
	export default {
		components:{
			tabBar
		},
		data() {
			return {
				experimentList:[
					
				]
			}
		},
		methods: {
			statusClass(status){
				console.log(status)
				switch(status){
					case 1:
					return 'normal';
					case 0:
					return 'stop';
					case 2:
					return 'error'
				}
			},
			cardClick(data){
				uni.navigateTo({
					url: '/pages/detail/index?data='+JSON.stringify(data)
				})
			},
			monitorClick(item){
				if(item.cameraDevices[0] && item.cameraDevices[0].devicesId){
					uni.navigateTo({
						url: '/pages/monitor/index?id='+item.cameraDevices[0].devicesId
					})
				}else{
					uni.showToast({
						icon:'none',
						title: '暂无视频流',
						duration: 2000
					});
				}
	
			},
			getData(){
				uni.showLoading({
					title: '加载中'
				});
				request('/blade-platform/home/list').then(res=>{
					console.log(res)
					uni.hideLoading();
					this.experimentList = res.records||[]
				}).catch(err=>{
					uni.showToast({
						icon:'none',
						title: err,
						duration: 2000
					});
				})
			}
		},
		mounted() {
			this.getData()
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100vh;
		background: url('../../static/imgs/home_bg.png')no-repeat;
		background-size: 100% 100%;
		padding-top: 380upx;
		box-sizing: border-box;
		.content-pannel{
			flex: 1;
			height: 0;
			padding: 0upx 35upx 0upx 35upx;
			.name{
				font-size: 40upx;
				color: #fff;
				font-weight: bold;
			}
			.exp-list{
				overflow-y: scroll;
				margin-top:15px;
			}
			.exp-card{
				box-sizing: border-box;
				padding: 50upx;
				border-radius: 20upx;
				background-color: #fff;
				.toggle{
					width: 78upx;
					height: 39upx;
				}
				.l-1{
					font-size: 36upx;
					color: #293F66;
					font-weight: bold;
					.status{
						width: 76upx;
						height: 33upx;
						line-height: 33upx;
						text-align: center;
						font-size: 22upx;
						margin-right: 10upx;
						color: #fff;
						&.normal{
							background: url('../../static/imgs/normal.png')no-repeat;
							background-size: 100% 100%;
						}
						&.error{
							background: url('../../static/imgs/error.png')no-repeat;
							background-size: 100% 100%;
						}
						&.stop{
							background: url('../../static/imgs/stop.png')no-repeat;
							background-size: 100% 100%;
						}
					}
				}
				.l-2{
					margin-top: 28upx;
					font-size: 28upx;
					color: #8C97B3;
				}
				.l-3{
					margin-top: 28upx;
					font-size: 32upx;
					color:#5B6989;
					.icon{
						width: 33upx;
						height: 33upx;
						margin-right: 11upx;
					}
				}
			}
			.exp-card+.exp-card{
				margin-top: 18px;
			}
		}
	}
</style>
